<script setup>
import { ref } from "vue";
import { Promotion, UploadFilled } from "@element-plus/icons-vue";
import { startSubmit } from "@/api/chart.js";
import { ElMessage } from "element-plus";

const uploadRef = ref();
const submitContent = ref({
  name: '',
  goal: '',
  chartType: ''
});
const file = ref(null);

const handleUploadChange = (uploadFile) => {
  if (uploadFile.raw) {
    file.value = uploadFile.raw;
  }
};

const submitForm = async () => {
  if (!file.value) {
    ElMessage.error('请选择要上传的文件');
    return;
  }
  try {
    await startSubmit({
      chartType: submitContent.value.chartType,
      goal: submitContent.value.goal,
      name: submitContent.value.name,
    }, file.value);
    ElMessage.success('提交成功，稍后可在我的图表界面查看');
  } catch (error) {
    ElMessage.error('提交失败');
  }
};
</script>

<template>
  <div class="container">
    <div class="form-section">
      <el-input
        v-model="submitContent.name"
        placeholder="图表名称"
        class="form-item"
      />
      <el-input
        v-model="submitContent.goal"
        placeholder="分析目标"
        class="form-item"
      />
      <el-input
        v-model="submitContent.chartType"
        placeholder="图表类型"
        class="form-item"
      />
    </div>

    <div class="upload-section">
      <el-upload
        class="upload"
        :drag="true"
        ref="uploadRef"
        :auto-upload="false"
        :on-change="handleUploadChange"
        accept=".csv,.xls,.xlsx"
        name="file"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          <el-icon><Promotion /></el-icon>
          <em>点击上传文件</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            支持扩展名：.csv .xls .xlsx
          </div>
        </template>
      </el-upload>
    </div>

    <div class="button-section">
      <el-button type="primary" @click="submitForm" class="submit-btn">
        立即提交
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="less">
@mobile: ~"only screen and (max-width: 768px)";

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

  @media @mobile {
    padding: 15px;
    border-radius: 0;
    box-shadow: none;
  }
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .form-item {
    :deep(.el-input__wrapper) {
      border-radius: 8px;
      padding: 12px 16px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 2px 10px rgba(64, 158, 255, 0.2);
      }
    }

    @media @mobile {
      :deep(.el-input__wrapper) {
        padding: 10px 14px;
      }
    }
  }
}

.upload-section {
  margin: 24px 0;

  .upload {
    width: 100%;
    height: 180px;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    background: #fafafa;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409EFF;
      background: #f5f9ff;
    }

    .el-icon--upload {
      font-size: 48px;
      color: #c0c4cc;
      margin-bottom: 12px;
    }

    .el-upload__text {
      font-size: 14px;
      color: #606266;

      em {
        color: #409EFF;
        font-style: normal;
        font-weight: 500;
      }
    }

    .el-upload__tip {
      color: #909399;
      font-size: 12px;
      margin-top: 8px;
    }

    @media @mobile {
      height: 140px;

      .el-icon--upload {
        font-size: 40px;
      }

      .el-upload__text {
        font-size: 13px;
      }
    }
  }
}

.button-section {
  .submit-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    border-radius: 8px;
    background: #409EFF;
    transition: all 0.3s ease;

    &:hover {
      background: #66b1ff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }

    &:active {
      transform: translateY(0);
    }

    @media @mobile {
      height: 44px;
      font-size: 15px;
    }
  }
}
</style>
